<template>
	<div class="login" @click="init">
		<img src="https://vue.ruoyi.vip/static/img/login-background.f9f49138.jpg" />
		<div class="container" @keyup.enter="login">
			<p>陨石商城后台管理系统</p>
			<input type="text" v-model="name" placeholder="请输入后台管理账号" :class="[isName?'curr':'']" />
			<span v-if="isName">123</span>
			<input type="password" v-model="password" placeholder="请输入后台管理密码" :class="[isName?'curr':'']"/>
			<span v-if="isPassword">123</span>
			<button @click.stop="login">登录</button>
			<h4 v-if="err">账号或密码错误</h4>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				isName:false,
				isPassword:false,
				err:false,
				name:"",
				password:"",
				
			}
		},
		methods:{
			init(){
				this.isName = false;
				this.isPassword = false;
				this.err = false;
			},
			login(){
				if(this.name == ""){
					this.isName = true
				}else if(this.password == ""){
					this.password = true;
				}else{
					this.axios({
						method:"post",
						url:"api/admin/login",
						data:{
							name:this.name,
							pw:this.password
						}
					}).then( res => {
						console.log(res);
						if(res.data.msg == ""){
							document.cookie = `admin_token=${res.data.data.token}`;
							document.cookie = `admin_name=${res.data.data.admin_name}`;
							this.$store.commit("loginToken");
							this.$store.commit("loginName");
							this.$router.push({path:`/home`});
						}else{
							this.err = true;
						}
					})
				}
				
			}
		},
		mounted() {
			
		}
	}
</script>

<style scoped>
	.login{
		overflow: hidden;
	}
	.login img{
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: -1;
	}
	.container{
		width: 400px;
		background-color: white;
		border-radius: 8px;
		margin: 280px auto 0;
		overflow: hidden;
	}
	.container p{
		text-align: center;
		font-size: 20px;
		margin: 28px 8px;
		color: gray;
		font-weight: bold;
	}
	.container input{
		box-sizing: border-box;
		width: 350px;
		height: 36px;
		border: 1px solid rgb(225,225,225);
		padding-left: 20px;
		display: block;
		margin: 20px auto 0;
		border-radius: 5px;
		outline: none;
	}
	.container span{
		font-size: 13px;
		color: red;
		margin-left: 25px;
	}
	.container h4{
		font-size: 14px;
		color: red;
		margin: 0;
		padding: 0;
		text-align: center;
		position: relative;
		top: -20px;
	}
	.container button{
		font-size: 15px;
		background-color: rgb(22,144,255);
		width: 350px;
		height: 35px;
		color: white;
		letter-spacing: 5px;
		display:block;
		margin: 20px auto 28px;
		outline: none;
		border: none;
		border-radius: 10px;
		cursor: pointer;
	}
	.container button:hover{
		background-color: rgb(70,166,255);
	}
	.container .curr{
		border: 1px solid red;
	}
</style>
